<template>
	<view>
		<view class="topnav">
			<uni-nav-bar title="分类"></uni-nav-bar>
		</view>
		<view class="">
			<uni-grid :column="4" :highlight="true">
				<uni-grid-item v-for="(item, index) in categoryList" :index="index" :key="index">
					<view @click="goPage(item.fictionType)" class="grid-item-box" style="background-color: #fff;">
						<uni-icons type="image" :size="30" color="#777" />
						<text class="text">{{item.fictionType}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import * as DB from "@/compoment/DB.js"
	export default {
		data() {
			return {
				categoryList:[{id:1,fictionType:"都市言情"},{id:2,fictionType:"女生频道"},
				{id:3,fictionType:"同人小说"},{id:4,fictionType:"搞笑"},{id:5,fictionType:"爱情"},
				{id:6,fictionType:"武侠仙侠"},{id:7,fictionType:"科幻灵异"},{id:8,fictionType:"玄幻魔法"},
				{id:9,fictionType:"都市小说"},{id:10,fictionType:"网游竞技"},{id:11,fictionType:"网游小说"},
				{id:12,fictionType:"奇幻"},{id:13,fictionType:"科幻小说"},{id:14,fictionType:"网游动漫"}]
			}
		},
		onPullDownRefresh() {
			this.getCategory()
		},
		onShow() {
			this.getCategory()
		},
		methods: {
			getCategory(){
				DB.find("uu_bookCategory").then((res)=>{
					// this.categoryList.push(...res)
					// this.categoryList =  Array.from(new Set(this.categoryList))
					this.categoryList = res
				}).catch((err)=>{
					console.log(err)
				})
				uni.stopPullDownRefresh()
			},
			goPage(fictionType){
				uni.navigateTo({
					url:`/pages/index/book/book?fictionType=${fictionType}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.topnav{
		margin-bottom: 20rpx;
	}
	.image {
			width: 25px;
			height: 25px;
		}
	
		.text {
			font-size: 14px;
			margin-top: 5px;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			// display: block;
			/* #endif */
		}
	
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
	
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	
		.swiper {
			height: 420px;
		}
	
		/* #ifdef H5 */
		@media screen and (min-width: 768px) and (max-width: 1425px) {
			.swiper {
				height: 630px;
			}
		}
	
		@media screen and (min-width: 1425px) {
			.swiper {
				height: 830px;
			}
		}
	
		/* #endif */
</style>
